require('../common/header/index.css');
require('../common/nav-simple/index.css');

require('../common/header/index.js');
require('../common/nav-simple/index.js');
require('./index.css');

var $ = require('jquery');
var _const = require('root/const')
var _category_service = require('service/category_service');
var _carousel_service = require('service/carousel_service');
var _good_service = require('service/good_service');


var page = {

    init : function() {
        this.renderHtml();
        this.bindEvent();
    },

    renderHtml : function() {
        this.renderCategory();
        this.renderCarousel();
        this.renderRecommend();
    },

    renderCategory : function() {
        _category_service.getLevel1Category(

            // success
            function(data, msg) {
                var len = data.length;
                var lines = Math.ceil(len / 2);
                var result = "<ul class='cat-nav-list'>";
                for(let i=0; i<lines; i++) {
                    result = result + "<li><span class='cat-nav-item-span'>" + data[2*i].category.name + "</span>";
                    if(i < len) {
                        result = result + "<span>&nbsp;/&nbsp;</span><span class='cat-nav-item-span'>" + data[2*i+1].category.name + "</span></li>";
                    } else {
                        result = result + "</li>"
                    }
                }
                result = result + "</ul>";
                $(".main .cat-nav-wrapper").html(result);
            },

            // error
            function(data, msg) {
            }
        );
    },

    renderCarousel : function() {
        _carousel_service.getCarousel(

            function(data, msg) {
                var len = data.length;
                var result = "<div class='banner'>";
                for(let i=0; i<len; i++) {
                    result = result + "<img class='slider-img' data-src='./search.html?query=" + data[i].query + "' src='" + require("../../images/carousel/" + data[i].carouselImage) + "'>";
                }
                result = result + "</div>";
                $(".main .carousel-wraper").html(result);
                $('.banner').slick({
                    autoplay: true,
                    autoplaySpeed: 2000,
                });
            },

            function(data, msg) {}
        );
    },

    // 说是推荐，其实是随便获取的数据
    renderRecommend : function() {
        _good_service.getRecommend(
            // success
            function(data, msg) {
                var len = data.length;
                var templateHtml = $("<div><div class='good-item item'>"+
                                        "<div class='good-img-wrapper'><img class='good-img'></div>"+
                                        "<div class='goot-info'>"+
                                            "<p class='good-name'></p>"+
                                            "<p class='good-price'></p>"+
                                        "</div>"+
                                    "</div></div>");
                for(let i=0; i<len; i++) {
                    templateHtml.find('.good-item').attr('data-src', 'detail.html?id=' + data[i].id);
                    templateHtml.find('.good-img').attr('src', _const.good_image_prefix + data[i].mainImage);
                    templateHtml.find('.good-name').text(data[i].name);
                    templateHtml.find('.good-price').text('￥'+(parseFloat(data[i].price)/100).toFixed(2));
                    $('.recommend-wrapper').html($('.recommend-wrapper').html() + templateHtml.html());
                }
                $('.recommend-wrapper').html($('.recommend-wrapper').html() + '<div class="clearfix"></div>');
            },

            //error
            function(data, msg) {
                
            }
        );
    },

    bindEvent : function() {
        this.bindGoodItemsEvent();
        this.bindSliderEvent();
    },

    bindGoodItemsEvent : function() {
        $('.recommend-wrapper').on('click', '.good-item', function() {
            window.open($(this).attr('data-src'));
        });
    },

    bindSliderEvent : function() {
        $('.carousel-wraper').on('click', '.slider-img', function() {
            window.open($(this).attr('data-src'));
        });
    }
}


$(function() {
    page.init();
})